<!-- views/purchase/components/SupplierDetailDialog.vue -->
<template>
  <el-dialog
    v-model="visible"
    title="供应商详情"
    width="800px"
    :before-close="handleClose"
  >
    <div class="supplier-detail" v-if="supplier">
      <el-tabs v-model="activeTab">
        <el-tab-pane label="基本信息" name="basic">
          <el-descriptions :column="2" border>
            <el-descriptions-item label="供应商名称" :span="2">
              {{ supplier.name }}
            </el-descriptions-item>
            <el-descriptions-item label="联系人">
              {{ supplier.contact || supplier.contactPerson }}
            </el-descriptions-item>
            <el-descriptions-item label="联系电话">
              {{ supplier.phone }}
            </el-descriptions-item>
            <el-descriptions-item label="邮箱">
              {{ supplier.email }}
            </el-descriptions-item>
            <el-descriptions-item label="地址" :span="2">
              {{ supplier.address }}
            </el-descriptions-item>
            <el-descriptions-item label="状态">
              <el-tag :type="getStatusType(supplier.status)">
                {{ getStatusText(supplier.status) }}
              </el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="合作时间">
              {{ supplier.cooperationDate }}
            </el-descriptions-item>
            <el-descriptions-item label="评分" :span="2">
              <el-rate
                :model-value="Number(supplier.rating)"
                :max="5"
                allow-half
                disabled
              />
            </el-descriptions-item>
            <el-descriptions-item label="备注" :span="2">
              {{ supplier.remark || '无' }}
            </el-descriptions-item>
          </el-descriptions>
        </el-tab-pane>
        
        <el-tab-pane label="采购记录" name="purchases">
          <el-table :data="purchaseRecords" v-loading="loadingRecords" style="width: 100%">
            <el-table-column prop="orderNo" label="订单号" width="150" />
            <el-table-column prop="productName" label="产品名称" width="180" />
            <el-table-column prop="quantity" label="数量" width="100" />
            <el-table-column prop="amount" label="金额" width="120">
              <template #default="scope">
                ¥{{ scope.row.amount.toLocaleString() }}
              </template>
            </el-table-column>
            <el-table-column prop="orderDate" label="下单时间" width="120" />
            <el-table-column prop="status" label="状态" width="100">
              <template #default="scope">
                <el-tag :type="getOrderStatusType(scope.row.status)">
                  {{ getOrderStatusText(scope.row.status) }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="remark" label="备注" />
          </el-table>
          
          <div class="pagination-container">
            <el-pagination
              v-model:current-page="recordPagination.page"
              v-model:page-size="recordPagination.limit"
              :total="recordPagination.total"
              :page-sizes="[10, 20, 50]"
              layout="total, sizes, prev, pager, next, jumper"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </el-tab-pane>
        
        <el-tab-pane label="合同管理" name="contracts">
          <el-table :data="contracts" style="width: 100%">
            <el-table-column prop="contractNo" label="合同编号" width="150" />
            <el-table-column prop="startDate" label="开始时间" width="120" />
            <el-table-column prop="endDate" label="结束时间" width="120" />
            <el-table-column prop="amount" label="合同金额" width="120">
              <template #default="scope">
                ¥{{ scope.row.amount.toLocaleString() }}
              </template>
            </el-table-column>
            <el-table-column prop="status" label="状态" width="100">
              <template #default="scope">
                <el-tag :type="getContractStatusType(scope.row.status)">
                  {{ getContractStatusText(scope.row.status) }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="remark" label="备注" />
            <el-table-column label="操作" width="100">
              <template #default="scope">
                <el-button size="small" type="primary">查看</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        
        <el-tab-pane label="评估记录" name="evaluations">
          <el-table :data="evaluations" style="width: 100%">
            <el-table-column prop="date" label="评估时间" width="150" />
            <el-table-column prop="evaluator" label="评估人" width="120" />
            <el-table-column prop="score" label="综合评分" width="100">
              <template #default="scope">
                <el-rate
                  v-model="scope.row.score"
                  :max="5"
                  allow-half
                  disabled
                />
              </template>
            </el-table-column>
            <el-table-column prop="qualityScore" label="质量评分" width="100" />
            <el-table-column prop="deliveryScore" label="交付评分" width="100" />
            <el-table-column prop="serviceScore" label="服务评分" width="100" />
            <el-table-column prop="remark" label="评估说明" />
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
import { 
  ref, 
  computed, 
  watch,
  defineProps,
  defineEmits
} from 'vue'

interface Supplier {
  id: number
  name: string
  contact: string
  phone: string
  email: string
  address: string
  status: string
  rating: number | string
  cooperationDate: string
  remark: string
  // 添加可能的字段别名
  contactPerson?: string
  createdAt?: string
  updatedAt?: string
}

interface PurchaseRecord {
  id: number
  orderNo: string
  productName: string
  quantity: number
  amount: number
  orderDate: string
  status: string
  remark: string
}

interface Contract {
  id: number
  contractNo: string
  startDate: string
  endDate: string
  amount: number
  status: string
  remark: string
}

interface Evaluation {
  id: number
  date: string
  evaluator: string
  score: number
  qualityScore: number
  deliveryScore: number
  serviceScore: number
  remark: string
}

const props = defineProps<{
  modelValue: boolean
  supplier: Supplier | null
}>()

const emit = defineEmits<{
  (e: 'update:modelValue', value: boolean): void
  (e: 'close'): void
}>()

const visible = computed({
  get: () => props.modelValue,
  set: (value: boolean) => emit('update:modelValue', value)
})

const activeTab = ref('basic')
const loadingRecords = ref(false)

const purchaseRecords = ref<PurchaseRecord[]>([
  {
    id: 1,
    orderNo: 'PO20230101',
    productName: '高性能计算服务器',
    quantity: 10,
    amount: 500000,
    orderDate: '2023-01-01',
    status: 'completed',
    remark: '按时交付'
  }
])

const contracts = ref<Contract[]>([
  {
    id: 1,
    contractNo: 'CT20230101',
    startDate: '2023-01-01',
    endDate: '2024-01-01',
    amount: 1000000,
    status: 'active',
    remark: '年度框架协议'
  }
])

const evaluations = ref<Evaluation[]>([
  {
    id: 1,
    date: '2023-06-01',
    evaluator: '采购经理',
    score: 4.5,
    qualityScore: 4.8,
    deliveryScore: 4.2,
    serviceScore: 4.5,
    remark: '产品质量稳定，交付及时'
  }
])

const recordPagination = ref({
  page: 1,
  limit: 10,
  total: 1
})

const handleClose = () => {
  visible.value = false
  emit('close')
}

const handleSizeChange = (size: number) => {
  recordPagination.value.limit = size
  // loadPurchaseRecords()
}

const handleCurrentChange = (page: number) => {
  recordPagination.value.page = page
  // loadPurchaseRecords()
}

const getStatusType = (status: string) => {
  switch (status) {
    case 'active': return 'success'
    case 'pending': return 'warning'
    case 'suspended': return 'info'
    case 'terminated': return 'danger'
    default: return 'info'
  }
}

const getStatusText = (status: string) => {
  switch (status) {
    case 'active': return '合作中'
    case 'pending': return '待审核'
    case 'suspended': return '已暂停'
    case 'terminated': return '已终止'
    default: return '未知'
  }
}

const getOrderStatusType = (status: string) => {
  switch (status) {
    case 'pending': return 'info'
    case 'processing': return 'warning'
    case 'shipped': return 'primary'
    case 'completed': return 'success'
    case 'cancelled': return 'danger'
    default: return 'info'
  }
}

const getOrderStatusText = (status: string) => {
  switch (status) {
    case 'pending': return '待处理'
    case 'processing': return '处理中'
    case 'shipped': return '已发货'
    case 'completed': return '已完成'
    case 'cancelled': return '已取消'
    default: return '未知'
  }
}

const getContractStatusType = (status: string) => {
  switch (status) {
    case 'draft': return 'info'
    case 'active': return 'success'
    case 'expired': return 'warning'
    case 'terminated': return 'danger'
    default: return 'info'
  }
}

const getContractStatusText = (status: string) => {
  switch (status) {
    case 'draft': return '草稿'
    case 'active': return '生效中'
    case 'expired': return '已过期'
    case 'terminated': return '已终止'
    default: return '未知'
  }
}
</script>

<style scoped>
.supplier-detail {
  padding: 20px 0;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
</style>